@extends('public.base')
@section('body')
    <style>
        .layui-unselect dl {
            max-height: 160px;
        }

        html {
            background-color: #fff;
        }
    </style>

    <div class="layui-row">
        <form id="main_form" class="layui-form layui-form-pane" action="" method="post" lay-filter="main-form-group">
            <!-- ==================================  隐藏区  ================================== -->
            <!-- ==================================  隐藏区  ================================== -->
            <input type="hidden" name="id" value="">

            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-tab layui-tab-card" lay-filter="tab_form">
                        <ul class="layui-tab-title">
                            <li class="layui-this">回复内容</li>
                            <li>历史回复</li>
                        </ul>
                        <div class="layui-tab-content">

                            <div class="layui-tab-item layui-show">
                                <div class="layui-form-item">
                                    <div class="layui-form-item layui-form-text">
                                    <textarea id="msg" name="msg" class="layui-textarea"
                                              style="height: 350px;width:100%;"></textarea>
                                    </div>

                                </div>
                            </div>

                            <div class="layui-tab-item ">


                                <table class="layui-table" id="main_table_2" lay-filter="main-table-filter"></table>

                            </div>

                            <!-- 第二个选项卡内容 -->



                        </div>
                    </div>

                    <!-- 按钮区 -->
                    <div class="layui-form-item layui-layout-admin">
                        <div class="layui-input-block">

                            <div class="layui-footer" style="left: 0;">
                                <button id="form_save" lay-filter="form_save" class="layui-btn"
                                        lay-submit="">
                                    保存
                                </button>
                                <button id="form_reset" type="button" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </div>
        </form>
    </div>
    <script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
    <script src="{{ADMIN_PATH}}js/admin.common.js"></script>
    <link rel="stylesheet" href="{{ADMIN_PATH}}kindeditor/themes/default/default.css" media="all">
    <script src="{{ADMIN_PATH}}kindeditor/kindeditor.js?{{time()}}"></script>
    <script>

        //========================================== 说明区 ==========================================
        //注意：选项卡tab 依赖 element 模块，否则无法进行功能性操作

        // ==========================  公共变量区  ========================================
        var form_id = 'main_form';
        //表格id
        var main_table_id = 'main_table_2';
        var save_url =  '{{url('admin/freebird/cs/edit')}}';
        var index_url =  '{{url('admin/freebird/cs/message')}}';
        var up_url = '{{url('public/upload/pic')}}';
        var main_table;
        // ==========================  全局函数区  ===========================================
        //默认函数，重载当前页面数据，1、页面初始化 2、配合搜索 3、配合post_data等操作的回调，如：编辑或删除完表格的记录后，刷新当前页面等
        function reload_data() {
            layui.use(['table'], function () {
                var table = layui.table;
                table.reload('grid');
            });
        }


        // ==============================  业务处理  ==============================================
        layui.use(['layer', 'laydate', 'table', 'element'], function () {
            //========================================== layui引用区 ==========================================

            var $ = layui.$
                , form = layui.form
                ,   table = layui.table
            ;



            // ==============================  业务区  =========================================
            //表格默认排序字段
            var table_sort = 'id';
            var table_order = 'asc';
            var id='{{$id}}';

            main_table = table.render({
                elem: '#' + main_table_id
                , url: index_url //异步数据接口
                , method: 'post' //接口http请求类型
                //, headers: {id: {!! $id !!}} //接口的请求头
                , limit: 10 //每页显示的条数
                , limits: 50//	每页条数的选择项
                , initSort: { //初始化时的排序,如果不设的话，将无法标记表头的排序状态
                    field: table_sort
                    , type: table_order
                }
                , where: {sort: table_sort, order: table_order,id:id}
                , loading: true //显示加载
                , text:  '查询无数据' //空数据时的异常提示
                , page: true //开启分页
                , cols: [[
                    {title: 'ID', field: 'id', width: 65, sort: true}

                    , {title: '内容', field: 'content', width: 260, sort: false}
                    //, {title: '内容', field: 'content', width: 200, sort: false}

                    , {title: '添加时间', field: 'create_time', width: 150, sort: true, templet: layui_table_time_tpl_1}


                ]]
                ,
                done: function (res, curr, count) {
                    //如果是异步请求数据方式，res即为你接口返回的信息。
                    if (res.status != 200) {
                        show_error(res.message);
                    }
                    if (count == 0) {
                        layer.msg('暂无相关数据');
                    }
                }
            });
            //========================================== 页面初始化 ==========================================
            //1、初始化form值:1、后台传来的数据
            var data = JSON.stringify({!!$data!!});
            json_to_form(data, form_id);

            //2、初始化编辑器，需要在 初始化form后面，因为editor要调隐藏域的内容
            //var editor = create_editor('memo');

            //========================================== 数据提交、元素事件绑定区 ==========================================

            /* 监听提交 */
            form.on('submit(form_save)', function(data){
                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                $.post(save_url, data.field, function (res) {
                    try {
                        if(res.status==200) {
                            //重新刷新父窗口的数据区
                            parent.layui.table.reload('main_table'); //重载表格
                            parent.layer.close(index); //再执行关闭
                        }else{
                            layer.msg(res.message);
                        }
                    } catch (e) {
                        layer.msg("异常");
                    }

                }, "json");

                return false;
            });

            //2、表单重置
            $('#form_reset').click(function () {
                /* 因为1、通过json赋值 2、layui需要重新渲染form的一些组件 3、有页面会集成kindeditor ，所以重置表单通过刷新浏览器实现最简便 */
                layer.confirm('确定重载表单吗？', function (index) {
                    //1、选择确定后执行的操作
                    window.location.reload();

                    //2、

                    //99、关闭自身窗口，请放在函数内部最后一行
                    layer.close(index);

                });
            });

            //========================================== 渲染区 ==========================================
            //表单重新渲染，请保存到最后一行
            //渲染表单
            form.render();

        });

        //=============================================时间选框================================================
        layui.use('laydate', function () {
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#LAY-component-form-group-date' //指定元素
                , type: 'datetime'
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#LAY-end-component-form-group-date' //指定元素
                , type: 'datetime'
            });
        });
        //上传组件
        layui.use('upload', function () {
            var $ = layui.$
                , form = layui.form
            ;
            var upload = layui.upload;

            //执行实例
            var uploadInst = upload.render({
                elem: '#upload_wap_img' //绑定元素
                , url: up_url //上传接口
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    layer.load(1); //上传loading
                }
                , done: function (res) {
                    if (res.error == 0) {
                        var src = res.data.src;
                        $("#upload_wap_img_val").val(src);
                    } else {
                        layer.msg(res.msg);
                    }
                    //上传完毕回调
                    layer.closeAll('loading'); //关闭loading
                }
                , error: function () {
                    //请求异常回调
                    layer.closeAll('loading'); //关闭loading
                }
            });

        });
    </script>
@stop